<template>
  <div class="wrap">
    <el-row>
      <!--工具条-->
      <el-col :span="24" class="header-wrap">
        <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" label-width="70px">
          <el-col :span="24">
            <el-form-item label="真实姓名" prop="name">
              <el-input v-model="formInline.name" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="formInline.phone" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <el-form-item label="证件号码" prop="userCard">
              <el-input v-model="formInline.userCard" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="state">
              <el-select v-model="formInline.state" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="正常" value="1"></el-option>
                <el-option label="黑名单" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="注册时间">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="query('formInline')">查询</el-button>
              <el-button type="danger" @click="reset('formInline')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
      <!--表格-->
      <el-col :span="24">
        <el-table :data="tableData" :border="true" style="width: 100%;min-width: 1200px;">
          <el-table-column label="手机号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center">user
            <template slot-scope="scope">
              <span>{{ scope.row.realName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证号码" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.idNo }}</span>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" align="center" :formatter="dateFormat" prop="createTime"></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.type == 1">正常</el-tag>
              <el-tag type="danger" v-if="scope.row.type == 0">黑名单</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="check(scope.$index, scope.row)">查看</el-button>
              <!--<el-button
                size="mini"
                type="warning"
                @click="addBlackList(scope.$index, scope.row)"
                v-if="scope.row.type== 1"
              >添加黑名单</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="removeBlacklist(scope.$index, scope.row)"
                v-if="scope.row.type== 0"
              >移除黑名单</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="top"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
        </el-pagination>
      </el-col>
    </el-row>
    <!--弹出框-->

    <!--图片预览框-->

    <el-dialog title="详细信息" :visible.sync="dialogTableVisible" fullscreen  width="70%" :close-on-click-modal="false"  @close="close">
      <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
      <big-img v-if="showImg1" @clickit="viewImg1" :imgSrc="imgSrc1"></big-img>
      <el-tabs type="border-card">

        <el-tab-pane label="基本信息">
          <!--图片信息-->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-col :span="10">
                <p class="card-center">身份证正面</p>
                <el-card>
                  <div class="center">
                    <img :src="info.frontImg" alt="frontImg" @click="clickImg($event)">
                  </div>
                </el-card>
              </el-col>
              <el-col :span="10">
                <p class="card-center">身份证反面</p>
                <el-card>
                  <div class="center">
                    <img :src="info.backImg" alt="backImg" @click="clickImg1($event)">
                  </div>
                </el-card>
              </el-col>
              <!--<el-col :span="4">
                <p class="card-center">人脸照片</p>
                <el-card>
                  <div class="ocr">
                    <img class="occr" :src="info.ocrImg" alt="ocrImg" @click="clickImg2($event)">
                  </div>
                </el-card>
              </el-col>-->
            </el-col>
          </el-row>
          <el-row class="pad">
            <el-col :span="24" class="head-line">基本信息</el-col>
            <el-col :span="24">
              <el-col :span="6">
                <span>真实姓名：</span>
                <el-tag type="info">{{ info.realName }}</el-tag>
              </el-col>
              <el-col :span="6">
                <span>注册手机：</span>
                <el-tag type="info">{{ info.phone }}</el-tag>
              </el-col>
              <el-col :span="6">
                <span>身份证：</span>
                <el-tag type="info">{{ info.idNo }}</el-tag>
              </el-col>
            </el-col>

            <el-col :span="24">
              <el-col :span="6">
                <span>银行卡：</span>
                <el-tag type="info">{{ bank.cardNo }}</el-tag>
              </el-col>
              <el-col :span="6">
                <span>所属银行：</span>
                <el-tag type="info">{{ bank.bank }}</el-tag>
              </el-col>
              <el-col :span="6">
                <span>预留手机号：</span>
                <el-tag type="info">{{ bank.phone }}</el-tag>
              </el-col>
            </el-col>

            <el-col :span="24">
              <el-col :span="6">
                <span>注册时间：</span>
                <el-tag type="info">{{ info.createTime }}</el-tag>
              </el-col>
            </el-col>

            <el-col :span="24">
              <el-col :span="10">
                <span>居住地址：</span>
                <el-tag type="info">{{ info.liveAddrDetail }}</el-tag>
              </el-col>
            </el-col>

            <el-col :span="24">
              <el-col :span="10">
                <span>注册所在地：</span>
                <el-tag type="info">{{ info.companyAddr }}</el-tag>
              </el-col>
            </el-col>

          </el-row>
          <el-row class="pad">
            <el-col :span="24" class="head-line">认证状态</el-col>

            <el-col :span="24">
              <el-col :span="8">
                <span>身份认证状态：</span>
                <el-tag type="info" v-if='this.clientAuth.idState == 0'>未认证</el-tag>
                <el-tag type="info" v-if='this.clientAuth.idState == 1'>已认证</el-tag>
                <el-tag type="info" v-if='this.clientAuth.idState == 2'>认证失败</el-tag>
                <el-tag type="info" v-if='this.clientAuth.idState == 3'>认证中</el-tag>
              </el-col>
              <el-col :span="8">
                <span>个人信息状态：</span>
                <el-tag type="info" v-if='this.clientAuth.privateMsg == 0'>未认证</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.privateMsg == 1'>已认证</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.privateMsg == 2'>认证失败</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.privateMsg == 3'>认证中</el-tag>
              </el-col>
              <el-col :span="8">
                <span>学历认证状态：</span>
                <el-tag type="info" v-if='this.clientAuth.jobSchool == 1'>已认证</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.jobSchool == 0'>未认证</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.jobSchool == 2'>认证失败</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.jobSchool == 3'>认证中</el-tag>
              </el-col>
            </el-col>

            <el-col :span="24">
              <el-col :span="8">
                <span>职业认证状态：</span>
                <el-tag type="info" v-if='this.clientAuth.jobSchool == 1'>已认证</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.jobSchool == 0'>未认证</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.jobSchool == 2'>认证失败</el-tag>
                <el-tag type="info" v-else-if='this.clientAuth.jobSchool == 3'>认证中</el-tag>
              </el-col>
            </el-col>

          </el-row>

        </el-tab-pane>

        <el-tab-pane label="通讯录">
          <el-table :data="dataContacts" :border="true" style="width: 100%"  :default-sort = "{prop: 'count', order: 'descending'}">
            <el-table-column prop="contacts" label="姓名" align="center"></el-table-column>
            <el-table-column prop="contactsPhone" label="手机号码" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="通话记录">
          <el-table :data="dataContacts" :border="true" style="width: 100%"  :default-sort = "{prop: 'duration', order: 'descending'}">
            <el-table-column prop="contacts" label="姓名" align="center"></el-table-column>
            <el-table-column prop="contactsPhone" label="手机号码" align="center"></el-table-column>
            <el-table-column prop="duration" label="通话时间" sortable align="center"></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="紧急联系人">
          <el-table :data="dataUrgent" :border="true" style="width: 100%">
            <el-table-column prop="contacts" label="姓名" align="center"></el-table-column>
            <el-table-column prop="contactsPhone" label="手机号码" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="短信">
          <el-table :data="dataContactsSms" :border="true" style="width: 100%">
            <el-table-column prop="contactsPhone" label="手机号码" align="center"></el-table-column>
            <el-table-column prop="body" label="短信内容" align="center"></el-table-column>
            <el-table-column prop="data" label="日期时间" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="借款记录">
          <el-table :data="borrowList" style="width: 100%" :border="true">
            <el-table-column prop="orderNo" label="订单号" align="center" min-width="160px;"></el-table-column>
            <el-table-column prop="loanAmount" label="借款金额(元)" align="center"></el-table-column>
            <el-table-column prop="loanTerm" label="借款期限(天)" align="center"></el-table-column>
            <el-table-column prop="createTime" :formatter="dateFormat"  label="借款时间" align="center" min-width="160px;"></el-table-column>
            <el-table-column prop="feeTotal" label="综合费用(元)" align="center"></el-table-column>
            <el-table-column prop="actualAmount" label="实际到账金额(元)" align="center" min-width="160px;"></el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0">审核中</el-tag>
                <el-tag type="warning" v-if="scope.row.status == 1">审核失败</el-tag>
                <el-tag type="success" v-if="scope.row.status == 2">审核通过</el-tag>
                <el-tag type="success" v-if="scope.row.status == 3">已放款</el-tag>
                <el-tag type="success" v-if="scope.row.status == 4">已到账</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注说明" align="center">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p style="width: 150px;line-height: 1.5;">{{ scope.row.remark }}</p>
                  <div slot="reference" class="name-wrapper">
                    <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.remark }}</p>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="top"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="currentPage1"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="size1"
            layout="total, sizes, prev, pager, next, jumper"
            :total='total1'>
          </el-pagination>
        </el-tab-pane>

      </el-tabs>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {post} from '@/utils/http'
  import {formatDateTime} from '@/utils/utils'
  import BigImg from '@/components/common/Img.vue';
  export default {
    data() {
      let validateName = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback();
        }
      };
      let validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback()
        }
      };
      let validateUserCard = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback();
        }
      };
      return {
        // 个人信息存值
        info: {},
        clientAuth: {},
        bank: {},
        idd: '',
        dialogTableVisible: false,
        currentPage: 1,
        total: 0,
        size: 10,
        formInline: {
          name: '',
          phone: '',
          userCard: '',
          state: '',
          id:''
        },
        date: '',
        date1: '',
        date2: '',
        tableData: [],
        addressList: [],
        dataUrgent: [],
        dataContacts: [],
        dataContactsCall:[],
        dataContactsSms: [],
        borrowList: [],
        currentPage1: 1,
        total1: 0,
        size1: 10,
        rules: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          phone: [
            { validator: validatePhone, trigger: 'blur' }
          ],
          userCard: [
            { validator: validateUserCard, trigger: 'blur' }
          ]
        },

        // 图片预览配置
        showImg:false,
        imgSrc: '',
        showImg1:false,
        imgSrc1: ''
      }
    },
    methods: {
      // 格式化时间
      dateFormat(row,column) {
        let tableTime = row[column.property];
        if (tableTime == undefined) {
          return "";
        }
        return this.moment(tableTime).format("YYYY-MM-DD HH:mm:ss");
      },
      formatter(row,column) {
          return row.count
      },
      getTime() {
        let starttime = '';
        let endtime = '';
        let time = this.date;
        if(!time[0] == '') {
          starttime = this.moment(time[0]).utc().format('YYYY-MM-DD[T]HH:mm:ss[Z]');
        }
        if(!time[1] == '') {
          endtime = this.moment(time[1]).utc().format('YYYY-MM-DD[T]HH:mm:ss[Z]');
        }
        if(starttime == "Invalid date"){
          starttime="";
        };
        if(endtime == "Invalid date"){
          endtime="";
        };
        this.date1 = starttime
        this.date2 = endtime
      },
      getList() {
        post('/api/manager/v1/clientInfo/queryClientInfo',{pageIndex: this.currentPage,pageSize: this.size}).then((response) => {
          this.tableData = response.data.data;
          this.total = response.data.totalCount;
          this.size = response.data.pageSize;
        })
      },
      // 借款记录
      getList1() {
        post('/api/manager/v1/loan/getMyLoanOrderList',{clientId: this.idd,pageIndex: this.currentPage1,pageSize: this.size1}).then((response) => {
          this.borrowList = response.data.data
          this.total1 = response.data.totalCount;
          this.size1 = response.data.pageSize;
        })
      },
      reset(formInline) {
        this.$refs[formInline].resetFields();
        this.date = ''
      },
      query(formInline) {
        this.getTime()
        this.$refs[formInline].validate((vaild) => {
          if(vaild) {
            // 发送请求查询
            let para = {
              pageIndex: this.currentPage,
              pageSize: this.size
            };
            if(!this.formInline.name.replace(/\s/g, "") == '') {
              para.realName = this.formInline.name.replace(/\s/g, "")
            }
            if(!this.formInline.phone.replace(/\s/g, "") == '') {
              para.phone = this.formInline.phone.replace(/\s/g, "")
            }
            if(!this.formInline.userCard.replace(/\s/g, "") == '') {
              para.idNo = this.formInline.userCard.replace(/\s/g, "")
            }
            if(!this.formInline.state == '') {
              para.type = this.formInline.state
            }
            if(!this.date1 == '') {
              para.startTime = this.date1
            }
            if(!this.date2 == '') {
              para.endTime = this.date2
            }
            post('/api/manager/v1/clientInfo/queryClientInfo',para).then((response) => {
              this.tableData = response.data.data;
              this.total = response.data.totalCount;
              this.size = response.data.pageSize;
            })
          }
        })
      },
      check(index, row) {
        this.idd = row.clientId;
        post('/api/manager/v1/clientInfo/queryClientInfoById',row.clientId).then((response) => {
          this.dialogTableVisible= true;
          this.info = Object.assign({}, response.data);
          this.clientAuth = response.data.clientAuth;
          this.bank = response.data.clientBankCard;
          this.info.createTime = this.moment(this.info.createTime).format("YYYY-MM-DD HH:mm:ss");
        })
        // 通讯录接口
        /*this.addressList = [];
        post('/api/manager/v1/clientInfo/queryClientContact',row.clientId ).then((response) => {
          this.addressList = response.data

        }).catch(function(err) {
          console.log(err)
        });*/
        // 会员信息接口
        this.dataUrgent = [];
        this.dataContacts = [];
        this.dataContactsCall = [];
        this.dataContactsSms = [];
        post('/api/manager/v1/clientInfo/getClientContacts',row.clientId ).then((response) => {
          this.dataUrgent = JSON.parse(response.data.contactsUrgent);
          this.dataContacts = JSON.parse(response.data.contacts);
          this.dataContactsCall = JSON.parse(response.data.contactsCall);
          this.dataContactsSms = JSON.parse(response.data.contactsSms);
        }).catch(function(err) {
          console.log(err)
        });
        // 借款记录接口
        this.getList1();
      },
     /* addBlackList(index, row) {
        // 添加黑名单
        this.$confirm('确认要添加到黑名单吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row)
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        });
      },
      removeBlackList(index, row) {
        // 移除黑名单
        this.$confirm('确认要移除黑名单吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row)
          this.$message({
            type: 'success',
            message: '移除成功!'
          });
        });
      },*/
      handleSizeChange(val) {
        this.size = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage =val;
        this.getList();
      },

      handleSizeChange1(val) {
        this.size1 = val;
        this.getList1();
      },
      handleCurrentChange1(val) {
        this.currentPage1 = val;
        this.getList1();
      },
      close() {
        this.showImg = false
        this.imgSrc = ''
        this.showImg1 = false
        this.imgSrc1 = ''
      },
      clickImg(e) {
        this.showImg = true;
        // 获取当前图片地址
        this.imgSrc = e.currentTarget.src;
      },
      viewImg(){
        this.showImg = false;
        this.imgSrc = ''
      },
      clickImg1(e) {
        this.showImg1 = true;
        this.imgSrc1 = e.currentTarget.src;
      },
      viewImg1(){
        this.showImg1 = false;
        this.imgSrc1 = '';
      }
    },
    components: {
      'big-img':BigImg
    },
    mounted(){
      this.getList();
    },
  }
</script>

<style lang='scss' scoped>
  .wrap {
    /*padding: 20px;*/
    .header-wrap{
      margin-bottom: 60px;
      background-color: #66BFBF;
      border-radius: 6px;
    }
    .el-form-item {
      margin-top: 22px;
      margin-left: 22px;
    }
    .pad {
      padding-top: 20px;
      .head-line {
        background-color: #66BFBF;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        padding-left: 20px;
        margin-bottom: 50px;
        font-size: 20px;
      }
      .el-col {
        margin-top: 6px;
        margin-bottom: 6px;
      }
    }
    .card-center {
      text-align: center;
    }
    .center {
      height: 250px;
    }
    .ocr {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 250px;
    }
    .ocrr {
      width: 60px;
      height: 60px;
    }
    .center img {
      width: 100%;
      height: 100%;
    }
    .top {
      margin-top: 20px;
      float: right;
    }
  }
</style>
